<template>
  <div style="background: #F0F2F5;" id="ExportUPtAnalysis">
    <commonSearch @onQuery="onQuery" @onReset="onReset" @onDownload="onDownload" />
    <a-spin :spinning="confirmLoading">
      <a-row :gutter="[8, 16]">
        <a-col :sm="24" :md="4" :xl="7" style="padding: 8px 10px 0 5px;">
          <chart-card title="预警人员总计" :total="statisticsData.warningPersonTotal.periodValue | NumberFormat">
            <template slot="footer">
              环比
              <a-icon
                v-if="statisticsData.warningPersonTotal.moMValue > 0"
                class="m1"
                type="caret-up"
                :style="{ fontSize: '16px', color: '#F52D38' }"
              />
              <a-icon
                v-if="statisticsData.warningPersonTotal.moMValue < 0"
                class="m1"
                type="caret-down"
                :style="{ fontSize: '16px', color: '#90D96C' }"
              />
              <span class="m1" v-if="statisticsData.warningPersonTotal.moMRatio == '-'">--</span>
              <span class="m1" v-if="statisticsData.warningPersonTotal.moMRatio != '-'">
                {{ Math.abs(statisticsData.warningPersonTotal.moMRatio) | NumberFormat }}%
              </span>
              <span class="m1"> {{ Math.abs(statisticsData.warningPersonTotal.moMValue) | NumberFormat }}</span>
            </template>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="4" :xl="7" style="padding: 8px 10px 0 0;">
          <chart-card title="人员关注总计" :total="statisticsData.personAttentionTotal.periodValue | NumberFormat">
            <template slot="footer">
              环比
              <a-icon
                v-if="statisticsData.personAttentionTotal.moMValue > 0"
                class="m1"
                type="caret-up"
                :style="{ fontSize: '16px', color: '#F52D38' }"
              />
              <a-icon
                v-else-if="statisticsData.personAttentionTotal.moMValue < 0"
                class="m1"
                type="caret-down"
                :style="{ fontSize: '16px', color: '#90D96C' }"
              />
              <span class="m1" v-if="statisticsData.personAttentionTotal.moMRatio == '-'">--</span>
              <span class="m1" v-if="statisticsData.personAttentionTotal.moMRatio != '-'">
                {{ Math.abs(statisticsData.personAttentionTotal.moMRatio) | NumberFormat }}%
              </span>
              <span class="m1"> {{ Math.abs(statisticsData.personAttentionTotal.moMValue) | NumberFormat }}</span>
            </template>
          </chart-card>
        </a-col>
        <a-col :sm="24" :md="4" :xl="7" style="padding: 8px 5px 0 0;">
          <chart-card title="屏蔽人员总计" :total="statisticsData.screenPersonTotal.periodValue | NumberFormat">
            <template slot="footer">
              环比
              <a-icon
                v-if="statisticsData.screenPersonTotal.moMValue > 0"
                class="m1"
                type="caret-up"
                :style="{ fontSize: '16px', color: '#F52D38' }"
              />
              <a-icon
                v-else-if="statisticsData.screenPersonTotal.moMValue < 0"
                class="m1"
                type="caret-down"
                :style="{ fontSize: '16px', color: '#90D96C' }"
              />
              <span class="m1" v-if="statisticsData.screenPersonTotal.moMRatio == '-'">--</span>
              <span class="m1" v-if="statisticsData.screenPersonTotal.moMRatio != '-'">
                {{ Math.abs(statisticsData.screenPersonTotal.moMRatio) | NumberFormat }}%
              </span>
              <span class="m1"> {{ Math.abs(statisticsData.screenPersonTotal.moMValue) | NumberFormat }}</span>
            </template>
          </chart-card>
        </a-col>
      </a-row>
      <a-row :gutter="10" style="margin-top:16px;">
        <a-col :span="12">
          <a-card title="人员画像-预警总计   TOP5" id="ExportUPtAnalysis1">
            <a-icon
              slot="extra"
              type="download"
              style="color:#BFBFBF;font-size: 20px;"
              @click="download('#ExportUPtAnalysis1', '人员档案-人员画像-预警总计 TOP5')"
            />
            <CustomTable
              :showAlert="false"
              :columns="columns1"
              :loading="loading1"
              :dataSource="pageData1"
              :showSelection="false"
            >
              <template slot="order" slot-scope="text, record, index">
                {{ index + 1 }}
              </template>
            </CustomTable>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="人员画像-劝阻累计次数   TOP5" id="ExportUPtAnalysis2">
            <a-icon
              slot="extra"
              type="download"
              style="color:#BFBFBF;font-size: 20px;"
              @click="download('#ExportUPtAnalysis2', '人员档案-人员画像-劝阻累计次数   TOP5')"
            />
            <CustomTable
              :showAlert="false"
              :columns="columns2"
              :loading="loading2"
              :dataSource="pageData2"
              :showSelection="false"
            >
              <template slot="order" slot-scope="text, record, index">
                {{ index + 1 }}
              </template>
            </CustomTable>
          </a-card>
        </a-col>
      </a-row>
      <a-row :gutter="10" style="margin-top:10px;">
        <a-col :span="12">
          <a-card title="人员关注-预警总计   TOP5" id="ExportUPtAnalysis3">
            <a-icon
              slot="extra"
              type="download"
              style="color:#BFBFBF;font-size: 20px;"
              @click="download('#ExportUPtAnalysis3', '人员画像-人员关注-预警总计   TOP5')"
            />
            <CustomTable
              :showAlert="false"
              :columns="columns3"
              :loading="loading3"
              :dataSource="pageData3"
              :showSelection="false"
            >
              <template slot="order" slot-scope="text, record, index">
                {{ index + 1 }}
              </template>
            </CustomTable>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="人员关注-劝阻累计次数   TOP5" id="ExportUPtAnalysis4">
            <a-icon
              slot="extra"
              type="download"
              style="color:#BFBFBF;font-size: 20px;"
              @click="download('#ExportUPtAnalysis4', '人员画像-人员关注-劝阻累计次数   TOP5')"
            />
            <CustomTable
              :showAlert="false"
              :columns="columns4"
              :loading="loading4"
              :dataSource="pageData4"
              :showSelection="false"
            >
              <template slot="order" slot-scope="text, record, index">
                {{ index + 1 }}
              </template>
            </CustomTable>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>
<script>
import exportHandle from '@/utils/export-util/pdf-canvas'
import ChartCard from '@/components/ChartCard'
import commonSearch from '.././components/commonSearch'
import CustomTable from '@/components/zxd/Table/CustomTable'
import {
  getAnalysisStatistics,
  getAttentionDissuadeTop5,
  getAttentionWarningTop5,
  getProtraitDissuadeTop5,
  getProtraitWarningTop5
} from '@/api/dataKanban/userPortrait.js'
export default {
  components: {
    ChartCard,
    CustomTable,
    commonSearch
  },
  data() {
    return {
      queryParam: {
        warningTimeType: '2',
        xzqh: undefined
      },
      statisticsData: {
        personAttentionTotal: {},
        screenPersonTotal: {},
        warningPersonTotal: {}
      },
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      columns1: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          width: 70
        },
        {
          title: '受害人手机号',
          dataIndex: 'phone',
          align: 'center',
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '预警总计',
          dataIndex: 'total',
          align: 'center'
        }
      ],
      columns2: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          width: 70
        },
        {
          title: '受害人手机号',
          dataIndex: 'phone',
          align: 'center',
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '劝阻累计次数',
          dataIndex: 'total',
          align: 'center'
        }
      ],
      columns3: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          width: 70
        },
        {
          title: '受害人手机号',
          dataIndex: 'phone',
          align: 'center',
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '预警总计',
          dataIndex: 'total',
          align: 'center'
        }
      ],
      columns4: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          width: 70
        },
        {
          title: '受害人手机号',
          dataIndex: 'phone',
          align: 'center',
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '劝阻累计次数',
          dataIndex: 'total',
          align: 'center'
        }
      ],
      pageData1: [],
      pageData2: [],
      pageData3: [],
      pageData4: [],
      pageFilter: {
        currentPage: 1, // 当前页数
        pageSize: 5 // 每页显示几条数据
      },
      confirmLoading: false
    }
  },
  mounted() {
    this.getAllData()
  },
  methods: {
    getAllData() {
      this.confirmLoading = true
      this.getAnalysisStatistics()
      this.getProtraitWarningTop5()
      this.getProtraitDissuadeTop5()
      this.getAttentionWarningTop5()
      this.getAttentionDissuadeTop5()
    },
    getAnalysisStatistics() {
      getAnalysisStatistics(this.queryParam)
        .then(res => {
          if (res.success) {
            this.statisticsData = res.result
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    getProtraitWarningTop5() {
      getProtraitWarningTop5(this.queryParam)
        .then(res => {
          if (res.success) {
            this.pageData1 = res.result
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    getProtraitDissuadeTop5() {
      getProtraitDissuadeTop5(this.queryParam)
        .then(res => {
          if (res.success) {
            this.pageData2 = res.result
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    getAttentionWarningTop5() {
      getAttentionWarningTop5(this.queryParam)
        .then(res => {
          if (res.success) {
            this.pageData3 = res.result
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    getAttentionDissuadeTop5() {
      getAttentionDissuadeTop5(this.queryParam)
        .then(res => {
          if (res.success) {
            this.pageData4 = res.result
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    onQuery(queryParam) {
      this.queryParam = queryParam
      this.getAllData()
    },
    onReset(queryParam) {
      this.queryParam = queryParam
      this.getAllData()
    },
    onDownload() {
      this.download('#ExportUPtAnalysis', '人员画像')
    },
    // 下载PDF
    download(DomID, filename) {
      let refDom = document.querySelector(DomID)
      this.$nextTick(() => {
        exportHandle.exportPDF(refDom, filename)
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-row {
  display: flex;
  .ant-col-xl-7 {
    // width: 33.334%;
    flex: 1;
  }
}

// /deep/ .ant-card-body {
  // height: 100%;
// }

/deep/ .ant-card {
  height: 100%;
  // margin: 0 10px;
  // overflow: auto;
}
/deep/.chart-card-content {
  // display: none;
  height: 0;
}
/deep/ .ant-card-head-title {
  font-weight: bold;
}
/deep/.total {
  line-height: 54px;
  height: auto;
  span {
    display: block;
    text-align: center;
  }
}
/deep/.chart-card-header .meta,
/deep/.chart-card-footer {
  text-align: center;
}
.m1 {
  margin-left: 10px;
}
</style>
